<template>
    <div class="container">
        <el-page-header @back="goBack" content="运营商列表"></el-page-header>
        <div class="e-m-t-45">
            <!-- 自定义表格 -->
            <el-row class="e-m-b-15" type="flex" justify="space-between">
                <el-col :span="3">
                    <el-button type="primary" plain icon="el-icon-plus" @click="dialogVisible = true">新建运营商</el-button>
                </el-col>
                <el-col class="text-right">
                    
                </el-col>
            </el-row>
            <div class="flex">
                <div class="">

                </div>
                <el-form :inline="true" class="demo-form-inline e-m-l-80 e-flex-1 text-right">
                    <el-form-item label="">
                        <div class="flex align-items-center">
                            <div class="e-flex-1">
                                <el-input placeholder="关键词搜索" prefix-icon="el-icon-search" v-model="key" clearable
                                    @change="getList"></el-input>
                            </div>
                            <!-- <el-checkbox v-model="firstOrder" @input="getList" class="e-m-l-15">是否首单</el-checkbox> -->
                        </div>
                    </el-form-item>
                    <el-form-item class="e-m-r-0">
                        <el-button type="primary" @click="getList()">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" style="width: 100%" stripe>
                <el-table-column fixed type="index" width="50">
                </el-table-column>
                <el-table-column prop="name" label="运营商名称">
                </el-table-column>
                <el-table-column prop="balance" label="账户余额">
                </el-table-column>
                <el-table-column prop="isproprietary" label="是否自营">
                    <template slot-scope="scope">
                        <span class="color-success" v-if="scope.row.isproprietary">是</span>
                        <span class="color-danger" v-else>否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="创建时间">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="300">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="views(scope.row)">查看</el-button>
                        <el-button type="text" size="small" @click="set(scope.row.id)">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
        <!-- 新建运营商 -->
        <el-dialog title="新建运营商" :visible.sync="dialogVisible" width="500px">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="140px">
                <el-form-item label="运营商名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="运营城市" prop="cityId">
                    <cityList v-model="addForm.cityId" @change="((v)=>{this.addForm.cityId = v})"></cityList>
                </el-form-item>
                <el-form-item label="管理员姓名" prop="userName">
                    <el-input v-model="addForm.userName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="管理员手机号码" prop="mobile">
                    <el-input v-model="addForm.mobile" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="createOperator">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import userList from '@/components/form-select-type/userList.vue'
import cityList from '@/components/form-select-type/cityList.vue'

export default {
    layout: 'admin',
    components: {
        userList,
        cityList
    },
    data() {
        return {
            loading: true,
            key: '',
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            tableColumns: [],
            tableActions: [
                {
                    name: 'view',
                    label: '查看',
                    // visible: row => row.status !== 'deleted'
                },
            ],
            franchiseId: null,
            staffId: null,
            // 新建运营商
            dialogVisible: false,
            addForm: {
                name: "",
                cityId: 0,
                userName: "",
                mobile: ""
            },
            rules: {
                name: [
                    { required: true, message: '请填写运营商名称', trigger: 'blur' },
                ],
                mobile: [
                    { required: true, message: '请填写管理员手机号码', trigger: 'blur' },
                ],
                cityId: [
                    { required: true, message: '请选择地区', trigger: 'change' },
                ],
                userName: [
                    { required: true, message: '请填写管理员姓名', trigger: 'blur' },
                ],
            },
        }
    },
    watch: {
        dialogVisible(val) {
            if (!val) {
                this.addForm = { 
                    name: "",
                    cityId: 0,
                    userName: "",
                    mobile: ""
                }
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        // 查看运营商详情
        views(row){
            console.log(row)
            this.$router.push({
                path: '/admin/operator/details',
                query: {
                    id: row.id
                }
            })
        },
        changeUser(value){
            console.log(value)
            this.staffId = value
        },
        getList(renew = true) {
            if (renew == true) {
                this.pageIndex = 1
            }
            this.tableData = []
            this.loading = true

            return this.$axios.post('/Operator/List',{
                "pageIndex": 1,
                "pageSize": 999,
                "key": this.key
            }).then((res) => {
                this.loading = false
                this.tableData = res.rows;
            }).catch((err) => {
                this.loading = false
            })
        },
        createOperator(){
            console.log('this.addForm',this.addForm)
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    let params = {
                        name: this.addForm.name,
                        cityId: this.addForm.cityId,
                        mobile: this.addForm.mobile,
                        userName: this.addForm.userName,
                    }
                    this.$axios.post('/Operator/Create', params).then((res) => {
                        this.$message.success("新建加盟商成功");
                        this.dialogVisible = false
                        this.getList()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 设置运营商员工属性
        set(){

        }
    }
}
</script>